<template>
  <div class="right-box">
    <div id="weekcommend" class="title">
      <slot name="title"></slot>
    </div>
    <div class="content">
      <el-row v-for="(book, index) in bookRanks" :key="index">
        <el-col :span="24">
          <i :class="['i'+Number(index)]">{{ index + 1 }}</i>
          <a class="book-name" href="javascript:void(0)" @click="bookDetail(book.id)">{{ book.bookName }}</a>
        </el-col>
        <el-col v-if="index==0" :span="24">
          <div class="book-info" @click="bookDetail(book.id)">
            <img :src="imageBaseUrl+book.picUrl" alt="Book Cover" class="book-image"/>
            <span>{{ book.bookDesc }}</span>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="more">
      <div class="more-btn">
        <router-link :to="{ name: 'bookRank', }" @click="changeActiveIndex">查看更多&gt;</router-link>
      </div>
    </div>
  </div>


</template>

<script lang="ts" setup>
import {useRoute, useRouter} from "vue-router";
import {ref} from "vue";
import emitter from "@/utils/bus";
import {useNavbarStore} from "@/stores/navbar";

const navbarStore = useNavbarStore();
const route = useRoute();
const router = useRouter();

interface BookRank {
  id: number;
  bookName: string;
  picUrl: string;
  bookDesc: string;
  bookAuthor: string;
}

const props = defineProps({
  bookRanks: {
    type: Array,
    default: () => [],
  },
});
const {bookRanks} = props;
// const imageBaseUrl = ref(process.env.VITE_APP_BASE_IMG_URL);
const imageBaseUrl = ref(import.meta.env.VITE_APP_BASE_IMG_URL);

const bookDetail = (bookId: any) => {
  router.push({path: `/book/${bookId}`});
};

const changeActiveIndex = () => {
  navbarStore.setActiveIndex('/book_rank')
};
</script>
<style lang="scss" scoped>
.right-box {
  box-sizing: border-box;
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 10px;
  /*辩题*/
  .title {
    font-size: 28px;
    font-weight: bold;
    color: #333;
    text-align: left;
    border-bottom: 1px solid #ddd;
    margin-bottom: 20px;
    padding-bottom: 20px;
  }

  .content {
    .el-col {
      display: flex;
      flex-direction: row;
      padding: 10px;

      i {
        display: block;
        background-color: red;
        width: 20px;
        height: 20px;
        text-align: center;
        color: #F5F5F5;
        //垂直居中
        line-height: 20px;
        background-color: #989898;
        margin-right: 10px;
      }

      .i0 {
        background-color: #F9701B;
      }

      .i1 {
        background-color: #F59022;
      }

      .i2 {
        background-color: #FDA560;
      }

      .book-name {
        /*清除a标签样式*/
        text-decoration: none;
        color: #333;
        font-weight: bold;

        &:hover {
          text-decoration: underline;
          color: #F70;
          cursor: pointer;
        }
      }

    }

    .book-info {
      display: flex;
      height: 100px;
      width: 100%;
      overflow: hidden;
      background-color: #F7F7F7;
      padding: 10px;

      .book-image {
        width: 60px;
        height: 100px;
        object-fit: cover;
      }

      span {
        padding-left: 10px;
        font-size: 14px;
        overflow: hidden;
        line-height: 20px;
        color: #999999;
      }
    }
  }

  .more {
    text-align: center;
    padding: 10px;

    .more-btn {
      height: 40px;
      line-height: 40px;
      background-color: #F7F7F7;

      a {
        //取消下划线
        text-decoration: none;
        color: #000;
      }
    }
  }
}
</style>